<template>
  <div class="app-container">

    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="88px">
      <el-form-item label="流程KEY" prop="key">
        <el-input
          v-model="queryParams.key"
          placeholder="请输入流程KEY"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="流程名称" prop="name">
        <el-input
          v-model="queryParams.name"
          placeholder="请输入名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button type="success" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="success" icon="el-icon-plus" size="mini" @click="OnlineDrawingProcess">绘制流程</el-button>
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleImport">部署流程</el-button>
      </el-col>
    </el-row>

    <!-- 列表 -->
    <el-table
      v-loading="listLoading"
      :data="list"
      stripe
      border
      style="width: 100%;margin-top: 10px;"
    >

      <el-table-column
        label="序号"
        width="70"
        align="center"
      >
        <template slot-scope="scope">
          {{ (pageNum - 1) * pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>

      <el-table-column prop="processDefinitionId" label="流程定义ID" width="180"/>
      <el-table-column prop="deploymentId" label="布署ID" width="110"/>
      <el-table-column prop="name" label="流程定义名称"/>
      <el-table-column prop="resourceName" label="流程文件名称"/>
      <el-table-column prop="key" label="KEY"/>
      <el-table-column prop="version" label="部署版本"/>

      <el-table-column label="操作" align="center" fixed="right">
        <template slot-scope="scope">
          <el-button type="text" @click="startDe(scope.row)">启动</el-button>
          <el-button type="text" @click="showDe(scope.row)">查看</el-button>
          <el-button type="text" @click="removeData(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination
      background
      :current-page="pageNum"
      :total="total"
      :page-size="pageSize"
      style="padding: 30px 0; text-align: right;"
      layout="total, prev, pager, next, jumper"
      @current-change="fetchData"
    />

    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="实例名称:" prop="instName">
          <el-input v-model="form.instName" placeholder="请输入名称"/>
        </el-form-item>
        <el-form-item label="实例描述:" prop="instDesc">
          <el-input v-model="form.instDesc" placeholder="请输入描述"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog
      :visible.sync="modelVisible"
      title="流程图"
      width="1500px"
      @close="modelCancel"
      append-to-body
    >
      <div style="position:relative;height: 100%;">
        <iframe
          id="iframe"
          :src="modelerUrl"
          frameborder="0"
          width="100%"
          height="700px"
          scrolling="auto"
        ></iframe>
      </div>
    </el-dialog>

    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
      <el-upload ref="upload" :limit="1" accept=".bpmn, .bar, .zip" :headers="upload.headers" :action="upload.url"
                 :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess"
                 :auto-upload="false" drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将文件拖到此处，或
          <em>点击上传</em>
        </div>
        <div class="el-upload__tip" style="color:#ff0000" slot="tip">提示：仅允许导入“bpmn”、“bar”或“zip”格式文件！</div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
import api from '@/api/act/deployment'
import { getToken } from '@/utils/auth'

export default {
  data() {
    return {
      listLoading: false, // 数据是否正在加载
      list: null, // 列表
      total: 0, // 数据库中的总记录数
      pageNum: 1,
      pageSize: 5,
      queryParams: {
        key: '',
        name: ''
      },
      // 显示搜索条件
      showSearch: true,
      modelVisible: false,
      modelerUrl: '',

      title: '',
      open: false,
      form: {},
      rules: {
        instName: [{ required: true, message: '实例名称不能为空', trigger: 'blur' }],
        instDesc: [{ required: true, message: '实例描述不能为空', trigger: 'blur' }]
      },
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: '',
        // 是否禁用上传
        isUploading: false,
        // 设置上传的请求头部
        headers: { token: getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + '/act/processDefinition/uploadStreamAndDeployment'
      }

    }
  },
  created() {
    // 调用列表方法
    this.fetchData()
  },
  methods: {

    handleQuery() {
      this.fetchData()
    },
    resetQuery() {
      this.queryParams = {}
      this.handleQuery()
    },

    fetchData(pageNum = 1) {
      this.pageNum = pageNum

      api.getPageList(this.pageNum, this.pageSize, this.queryParams).then(response => {
        this.list = response.data.listMap
        this.total = response.data.total
      })
    },
    OnlineDrawingProcess() {
      this.modelVisible = true
      localStorage.setItem('VUE_APP_BASE_API', process.env.VUE_APP_BASE_API)
      localStorage.setItem('token', getToken())
      this.modelerUrl = '/bpmnjs/index.html?type=addBpmn'
    },
    handleImport() {
      this.upload.title = '上传模型图'
      this.upload.open = true
    },
    submitFileForm() {
      this.$refs.upload.submit()
    },

    modelCancel() {
      this.fetchData()
    },

    startDe(row) {
      this.open = true
      this.title = '添加流程'
      this.form = {}
      this.form.processDefinitionKey = row.key
      this.form.instanceId = row.id
      this.form.instanceName = row.name
      this.form.instanceVariable = row.version
    },
    submitForm() {
      this.$refs['form'].validate(valid => {
        api.startProcess(this.form).then(res => {
          if (res.code === 200) {
            this.$message.success('启动成功')
            this.open = false
            this.fetchData()
          }
        })
      })
    },
    cancel() {
      this.open = false
      this.fetchData()
    },
    showDe(data) {
      this.modelVisible = true
      localStorage.setItem('VUE_APP_BASE_API', process.env.VUE_APP_BASE_API)
      localStorage.setItem('token', getToken())
      this.modelerUrl = '/bpmnjs/index.html?type=lookBpmn&deploymentId=' + data.deploymentId + '&deploymentName=' + encodeURI(data.resourceName)
    },

    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true
    },
    handleFileSuccess(response) {
      this.upload.open = false
      this.upload.isUploading = false
      this.$refs.upload.clearFiles()
      this.$alert(response.message, '导入结果', { dangerouslyUseHTMLString: true })
      this.fetchData()
    },

    removeData(row) {
      api.delDefinition(row.deploymentId, row.processDefinitionId).then(res => {
        if (res.code === 200) {
          this.$message.success('删除成功')
          this.fetchData()
        }
      })
    }

  }
}
</script>
